import Event from '../Events.js'
import MoveMark from './MoveMark.js';
import Board from './Board.js'
import SelectMark from './SelectMark.js'
import SelectLayer from './SelectLayer.js';
import ContentCache from './ContentCache.js'


class Design extends Event {
    constructor() {
        super();
        this.MoveMark = new MoveMark();
        this.Board = new Board();
        this.SelectMark = new SelectMark(this.Board);
        this.MoveMark.on('Move', this.BoardMove, this);
        this.ContentCache = new ContentCache();
        this.ZIndex = 10000;
        this.SelectLayer = new SelectLayer();

        this.ContentCache.on('Render', (item) => {
            this.Board.add(item);
        }, this)
        this.ContentCache.on('Delete', (item) => {
            this.Board.remove(item);
        }, this)

        this.Status = {
            Select: false,
        };

        this.Board.on('MouseDown', (event) => {
            this.Status.Select = true;
            this.SelectMark.setStartPoint(event.data.global.x - this.Board.ContentGrounp.x, event.data.global.y - this.Board.ContentGrounp.y);
        }, this);
        this.Board.on('MouseMove', (event) => {
            this.Status.Select && this.SelectMark.setMovePoint(event.data.global.x - this.Board.ContentGrounp.x, event.data.global.y - this.Board.ContentGrounp.y);
        }, this);
        this.Board.on('MouseUp', (event) => {
            if (this.Status.Select) {
                this.SelectMark.getValue(event.data.global.x - this.Board.ContentGrounp.x, event.data.global.y - this.Board.ContentGrounp.y);
                this.Status.Select = false;
            }
        }, this);
    }
    clearSelectMark() {
        this.Status.Select = false;
        this.SelectMark.clear();
    }
    BoardMove(x, y, status) {
        this.Board.Move(x, y, status);
    }
    destroy() {
        this.MoveMark.off('Move', this.BoardMove, this);
        this.Board.destroy();
    }
}


export default Design;
